<template>
	<view v-if="info.id">
		<u-image :src="info.cover" width="750" mode="widthFix"></u-image>


        <image @click="want_comment" :src="$ftpUrl('/want_comment.png')" style="height:106rpx;width: 106rpx;"  mode="widthFix" class="want_comment"></image>

		<view class="move">
			<view class="shadow u-padding-20 ">
				<view class="u-flex u-row-between">
					<view class="u-font-lg u-font-weight ">{{info.storeName}}</view>
					<view>
						<u-rate  disabled  v-model="info.score" active-color="#FF5D39" size="24"></u-rate><text class="u-font-xs"
							style="color: #FF5D39;">{{info.score}}分</text>
					</view>
				</view>
				<view class="$u-type-info u-margin-top-20 u-font-xs">
					{{info.description}}
				</view>
				<view class="u-flex u-flex-wrap">
					<u-tag v-for="(item,index) in info.tabs" :key="index" class="u-margin-right-10 u-margin-top-10"
						:text="item" mode="plain" size="mini" shape="circle" color="#818DFF" border-color="#818DFF"
						v-if="item"></u-tag>
				</view>
			</view>

			<view class="shadow u-padding-20 u-margin-top-20">
				<view>
					<u-icon name="map-fill" color="#4066F4"></u-icon>
					<text class="u-margin-left-20" style="color: #4066F4;">
						详细地址
					</text>
				</view>

				<view class="u-font-weight u-margin-left-50 u-flex u-row-between txt" @click="goaddress">
					<view class="u-flex-5">{{info.address}}</view>
					<image :src="$ftpUrl('/daohang.png')" mode="widthFix" style="width: 108rpx;height: 48rpx;"></image>
				</view>

				<view>
					<u-icon name="clock-fill" color="#4066F4"></u-icon>
					<text class="u-margin-left-20" style="color: #4066F4;">
						营业时间
					</text>
				</view>

				<view class="u-font-weight u-margin-left-50 u-flex u-row-between txt">
					<view class="u-flex-5">{{info.openTime}}</view>
				</view>


				<view>
					<image :src="$ftpUrl('/mainwork.png')" style="width: 28rpx;height:28rpx"></image>
					<text class="u-margin-left-20" style="color: #4066F4;">
						主营业务
					</text>
				</view>

				<view class="u-font-weight u-margin-left-50 u-flex txt">
					<view v-for="(item,index) in info.tabs" :key="index" class="u-margin-right-10">{{item}}</view>
				</view>

				<view class="txt">
					<u-icon name="phone-fill" color="#4066F4"></u-icon>
					<text class="u-margin-left-20" style="color: #4066F4;">
						门店电话
					</text>
				</view>

				<view class="u-font-weight u-margin-left-50 u-flex u-row-between">
					<view class="u-flex-5">{{info.tel}}</view>
				</view>

			</view>
			
			
			<view class="nav"  v-if="evaluateList.length">
				<view class="u-font-weight u-font-lg">门店评价</view>
				<view class="block" @click="goevaluate">
					<text>全部</text>
					<u-icon name="arrow-rightward" color="#4066F4"></u-icon>
				</view>
			</view>
			
			<evaluateList :evaluateList="evaluateList" v-if="evaluateList.length"></evaluateList>
			
			
			<view class="nav"  v-if="caseList.length">
				<view class="u-font-weight u-font-lg">店铺案例</view>
				<view class="block" @click="goStore">
					<text>全部</text>
					<u-icon name="arrow-rightward" color="#4066F4"></u-icon>
				</view>
			</view>
			
			
			
			<view  v-if="caseList.length" @click="go(item)" class="u-flex shadow u-margin-top-20" v-for="(item,index) in caseList" :key='index'>
				<view>
					<u-image :src="item.cover" border-radius="20" width="280" height="200"></u-image>
				</view>
				<view class="u-margin-left-20  ">
					<view class="u-font-lg u-font-weight u-line-2">{{item.title}}</view>
					<view class="u-margin-top-20 $u-type-info">
					<u-icon name="map-fill" color="#818DFF"></u-icon>
					{{item.city}}</view>
				</view>
			</view>
			
			
			


		</view>
		
		<view class="nav"  style="margin-bottom: 40rpx;">
			<view class="u-font-weight u-font-lg">店铺介绍</view>
		</view>
		<u-parse :html='info.detail'></u-parse>

	</view>
</template>

<script>
	import evaluateList from "@/components/evaluateList.vue";
	export default {
		components:{
			evaluateList
		},
		data() {
			return {
				id: '',
				info: {

				},
				evaluateList:[],
				caseList:[]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
			this.evaluate()
			this.getcaseList()
		},
		methods: {
			go(item){
				uni.navigateTo({
					url:"/else/designSketch/detail?id="+item.id
				})
			},
			jiazai() {
				this.$u.post('/index/storeDetail', {
					store_id: this.id
				}).then(res => {
					this.info = res;
				}).catch(err => {

				})
			},
			getcaseList(){
				this.$u.post('/index/cases', {
					store_id: this.id,
					limit:2
				}).then(res => {
					this.caseList=res;
				}).catch(err => {
				
				})
			},
			goaddress() {
				uni.openLocation({
					latitude: parseFloat(this.info.lat),
					longitude: parseFloat(this.info.lng),
					scale: 18,
					address: this.info.address
				})

			},
			evaluate(){
				this.$u.post('/index/storeEvaluate', {
					store_id: this.id,
					limit:2
				}).then(res => {
					this.evaluateList=res;
				}).catch(err => {
				
				})
				
			},
			goevaluate(){
				console.log(111)
				uni.navigateTo({
					url:"./evaluateList?id="+this.id
				})
			},
			
			want_comment(){
				uni.navigateTo({
					url:"./want_evaluateList?id="+this.id
				})
			},
			goStore(){
				uni.navigateTo({
					url:'./StoreList?id='+this.id
				})
			}
			
		}
	}
</script>

<style>
	.move {
		width: 700rpx;
		margin: auto;
		position: relative;
		bottom: 100rpx;
	}

	.txt {
		margin: 20rpx 0;
	}
	
	
	.nav{
		display: flex;
		justify-content: center;
		text-align: center;
		position: relative;
		align-items: center;
		margin-top: 40rpx;
	}
	.block{
		position: absolute;
		right: 0;
		border-radius: 100rpx;
		padding: 7rpx 15rpx;
		border: 1rpx solid #4066F4 ;
		color: #4066F4 ;
	}

.want_comment{
	position: fixed;
	right: 0;
	bottom: 400rpx;
	z-index: 999;
}
</style>
